<template>
  <div class="class-student-container">
    <el-card>
      <!-- 头部功能 -->
      <el-row type="flex" justify="space-between" class="class-header-row">
        <!-- 左侧区域 -->
        <div class="left">
          <el-form label-width="80px" inline :model="queryData" class="classForm">
            <el-form-item>
              <el-input
                v-model="queryData.student_name"
                size="small"
                placeholder="学员姓名"
              />
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="queryData.subject_id"
                clearable
                size="small"
                placeholder="归属学科"
                @change="subjectSelectChange"
              >
                <el-option v-for="item in subject" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="queryData.class_id"
                clearable
                size="small"
                placeholder="归属班级"
              >
                <el-option v-for="item in className" :key="item.id" :label="item.class_name" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="queryData.student_state"
                clearable
                size="small"
                placeholder="账号状态"
              >
                <el-option label="待审核" :value="1" />
                <el-option label="正常" :value="2" />
                <el-option label="禁用" :value="3" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                size="small"
                type="primary"
                plain
                @click="onSubmit"
              >搜索</el-button>
              <el-button size="small" @click="reset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- 右侧 -->
        <div class="right">
          <el-button
            type="warning"
            size="small"
            plain
            @click="excelDialog = true"
          >批量导入</el-button>
          <el-button
            type="primary"
            size="small"
            plain
            @click="$refs.formDialog.showDialog = true"
          >增加学员</el-button>
        </div>
      </el-row>

      <!-- 批量操作 -->
      <el-row v-if="batchShow" class="class-header-row">
        <el-button type="success" size="small" @click="batchChangeState(2)">批量启用</el-button>
        <el-button type="warning" size="small" @click="batchChangeState(3)">批量禁用</el-button>
        <el-button type="danger " size="small" @click="batchDel">批量删除</el-button>
      </el-row>

      <!-- 表格区域 -->
      <el-table
        border
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ background: '#fafafa', color: '#646464' }"
        @selection-change="handleCheckbox"
      >
        <el-table-column align="center" type="selection" width="60" />
        <el-table-column align="center" type="index" label="序号" width="120" />
        <el-table-column prop="student_name" label="学生姓名" />
        <el-table-column prop="student_phone" label="手机号" />
        <el-table-column prop="class_name" label="班级名称" />
        <el-table-column prop="subject_name" label="学科名称" />
        <el-table-column prop="student_sex" label="性别">
          <template slot-scope="{ row }">
            <span v-if="row.student_sex === 1">男</span>
            <span v-else>女</span>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="{ row }">
            <el-tag v-if="row.student_state === 1" type="warning">待审核</el-tag>
            <el-tag v-else-if="row.student_state === 2" type="success">正常</el-tag>
            <el-tag v-else type="info">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="username" label="创建人" />
        <el-table-column align="center" prop="created_at" label="创建日期" />
        <el-table-column width="100px" label="操作" fixed="right">
          <template slot-scope="{row}">
            <el-button size="small" type="primary" icon="el-icon-edit" circle @click="edit(row.id)" />
            <el-popconfirm title="确定删除吗" @confirm="del(row.id)">
              <el-button slot="reference" size="small" type="danger" icon="el-icon-delete" circle />
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <br>
      <!-- 分页区域  -->
      <el-row type="flex" justify="end">
        <el-pagination
          background
          :current-page="queryData.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="queryData.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="queryData.total"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </el-card>

    <!-- 弹框 -->
    <!-- <student-dialog ref="formDialog" :subject="subject" @update="initData" /> -->
    <addStudents ref="formDialog" :subject="subject" @update="initData" />
    <!-- excel弹框 -->
    <excel-dialog
      v-if="excelDialog"
      ref="excelDialog"
      :file-info="fileInfo"
      :upload-show="excelDialog"
      @close="close"
      @uploadData="uploadData"
    />
  </div>
</template>

<script>
import addStudents from './components/addStudents.vue'
import {
  subjectListApi,
  classListApi
} from '@/api/class'
import { batchChangeState, delStudentInfoApi, studentList, studentInfoApi } from '@/api/student'
export default {
  name: 'StudentPage',
  components: {
    addStudents
  },
  data() {
    return {
      subject: [], // 学科科目
      queryData: { // 初始数据
        student_name: '',
        class_id: '',
        subject_id: '',
        student_state: '',
        page: 1,
        limit: 10
      },
      tableData: [], // 表格数据
      batchShow: false, // 设置批量区域的显示隐藏
      checkboxSelection: [], // 表格多选框选中的数据
      className: [], // 班级名称
      excelDialog: false
    }
  },
  created() {
    this.getSubject()
    this.initData()
  },
  methods: {
    // 获取学科科目
    async getSubject() {
      const res = await subjectListApi()
      // console.log('subject', res)
      this.subject = res
    },
    // 学科下拉框发生变化触发
    async subjectSelectChange(subjectId) {
      // console.log('subjectSelectChange', subjectId) // 当前选择的值
      // 发送请求--获取对应的班级
      const res = await classListApi({
        page: 1,
        limit: 1000,
        subject_id: subjectId
      })
      // console.log('className', res)
      this.className = res.list
    },
    // 初始化数据
    async initData() {
      const res = await studentList(this.queryData)
      // console.log('studentList', res)
      this.queryData.total = res.total
      this.tableData = res.list
    },
    // 页码变化时触发
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.queryData.page = val // 更新页码
      this.initData()
    },
    // 表单提交
    onSubmit() {
      this.initData()
    },
    // 重置表单
    reset() {
      // 重置初始值
      this.queryData = {
        student_name: '',
        class_id: '',
        subject_id: '',
        student_state: '',
        page: 1,
        limit: 10
      }
      this.initData()
    },
    // 修改行为
    async edit(id) {
      const res = await studentInfoApi(id)
      console.log('studentInfo', res)
      this.$refs.formDialog.formData = res
      this.$refs.formDialog.showDialog = true
    },
    async del(id) {
      console.log(id)
      await delStudentInfoApi({ id: [id] })
      this.$message.success('删除成功')
      if (this.list.length === 1 && this.queryData.page > 1) this.queryData.page--
      this.initData()
    },
    // 多选框变化时触发
    handleCheckbox(seletion) {
      console.log('seletion', seletion) // 选中的多选框数据
      this.checkboxSelection = seletion
      // 如果多选框选中，就显示批量操作按钮, 否则隐藏
      if (seletion.length > 0) {
        this.batchShow = true
      } else {
        this.batchShow = false
      }
    },
    // // 批量删除
    async batchDel() {
      const delIds = []
      // 拿到表格多选框选中的所有id
      this.checkboxSelection.forEach(item => {
        delIds.push(item.id)
      })
      this.del('', delIds)
      this.initData()
    },
    // 批量禁用/启用
    async batchChangeState(num) {
      const checkboxId = []
      // 拿到表格多选框选中的所有id
      this.checkboxSelection.forEach(item => {
        checkboxId.push(item.id)
      })
      await this.$confirm(`确定批量${num === 3 ? '禁用' : '启用'}这${checkboxId.length}条数据吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 发送请求
        await batchChangeState({
          id: checkboxId,
          status: num
        })
        this.$message.success(num === 3 ? '禁用成功' : '启用成功')
        this.initData()
      }).catch(() => {
        this.$message.info('已取消')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.class-student-container {
  .class-header-row {
    padding-bottom: 16px;
  }
  .el-form-item {
    margin-bottom: 0;
  }
}
::v-deep .item-zyt {
  margin: 0;
  margin-right: 10px;
  margin-bottom: 0 !important;
  .el-form-item__label {
    text-align: left;
    color: #99a9bf;
    font-weight: 400;
  }
}
</style>
